<template>
  <div id="main" style="width: 800px;height:800px;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default{
  name: '',
  components: {},
  mounted() {
    setTimeout(() => {
        this.getLoadEcharts();
        }, 800)
    
  },
  methods: {
    getLoadEcharts(){
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;

        const data = [
        [5000, 8000, 6285.71],
        [4000, 9000, 6325],
        [3000, 6500, 4463.33],
        [3500, 6600, 4793.83],
        [3000, 6000, 4560],
        [2000, 6000, 4222.33],
        [2500, 4000, 3133.33],
        [4000, 8000, 6000],
        [6000, 8500, 7250],
        [3000, 8000, 5500],
        [1800, 5000, 3433.33],
        [2000, 5700, 3375],
        [1500, 6800, 4150],
        [3000, 6300, 4600],
        [5600, 8500, 7057.14],
        [4500, 6600, 5537.5],
        [3500, 5417.54, 4405.85],
        [3500, 6000, 4775],
        [4500, 6800, 5650]
        ];
        // prettier-ignore
        const cities = ['北京', '上海', '深圳', '广州', '苏州', '杭州', '南京', '福州', '青岛', '济南', '长春', '大连', '温州', '郑州', '武汉', '成都', '东莞', '沈阳', '烟台'];
        const barHeight = 50;
        option = {
        title: {
            text: '登录人次统计',
            subtext: '截止到当前月-各地每月登录人次统计表'
        },
        legend: {
            show: true,
            top: 'bottom',
            data: ['Range', 'Average']
        },
        grid: {
            top: 100
        },
        angleAxis: {
            type: 'category',
            data: cities
        },
        tooltip: {
            show: true,
            formatter: function (params) {
            const id = params.dataIndex;
            return (
                cities[id] +
                '<br>Lowest:' +
                data[id][0] +
                '<br>Highest:' +
                data[id][1] +
                '<br>Average:' +
                data[id][2]
            );
            }
        },
        radiusAxis: {},
        polar: {},
        series: [
            {
            type: 'bar',
            itemStyle: {
                color: 'transparent'
            },
            data: data.map(function (d) {
                return d[0];
            }),
            coordinateSystem: 'polar',
            stack: 'Min Max',
            silent: true
            },
            {
            type: 'bar',
            data: data.map(function (d) {
                return d[1] - d[0];
            }),
            coordinateSystem: 'polar',
            name: 'Range',
            stack: 'Min Max'
            },
            {
            type: 'bar',
            itemStyle: {
                color: 'transparent'
            },
            data: data.map(function (d) {
                return d[2] - barHeight;
            }),
            coordinateSystem: 'polar',
            stack: 'Average',
            silent: true,
            z: 10
            },
            {
            type: 'bar',
            data: data.map(function (d) {
                return barHeight * 2;
            }),
            coordinateSystem: 'polar',
            name: 'Average',
            stack: 'Average',
            barGap: '-100%',
            z: 10
            }
        ]
        };

        option && myChart.setOption(option);
    }
  }
};


</script>

<style scoped lang='scss'></style>

